<!-- components/custom-payment/custom-payment.vue -->
<script lang="ts" setup>
import { ref } from 'vue'

// 在线支付弹层
const paymentPopup = ref()

// 打开弹层
const open = () => {
  paymentPopup.value.open()
}
// 关闭弹层
const close = () => {
  paymentPopup.value.close()
}

// 开放关闭和显示弹层的方法
// 暴露子组件内部的方法给外部，
// 外部通过 ref 获取到组件之后，即可调用对应的方法
defineExpose({ open, close })

// 点击关闭
const clickClose = () => {
//   close()
emit('close')
}

const onMaskClick = () => {
//   close()
emit('close')
}

// 定义 prop 接收传递的数据
const props = defineProps<{orderId:string; amount:number}>()

// 支付渠道的索引 事件传递给父组件
const channelIndex = ref(0)
// 支付渠道（方式）
const paymentChannel = [
  {
    title: '微信支付',
    thumb: '/static/images/wechatpay-icon.png',
  },
  {
    title: '支付宝支付',
    thumb: '/static/images/alipay-icon.png',
  },
  {
    title: '银联支付',
    thumb: '/static/images/alipay-icon.png',
  },
]

const changeIndex = (index: number) => {
  console.log('点击不同付款方式')
  channelIndex.value = index
}

// 子-》父
const emit = defineEmits<{
  // 事件名 close，无返回值
  (e: 'close'): void
  (e: 'confirm', index: number): void
}>()

// 传递支付索引给父组件
const submitPayment = () => {
  // 点击提交时，传递最新的索引
  emit('confirm', channelIndex.value)
}
</script>
<template>
  <uni-popup @maskClick="onMaskClick" :is-mask-click="false" ref="paymentPopup" type="bottom">
    <view class="payment-container">
      <view class="payment-header">
        <text class="title">选择支付方式</text>
        <uni-icons @click="clickClose" class="uni-icons-close" size="18" color="#333" type="closeempty" />
      </view>
      <view class="order-amount">¥ {{props.amount}}.00</view>
      <uni-list :border="false">
         <!-- 布尔值的属性 写上了 就是 true 指定布尔值 v-bind 
            第三方组件有可能不能直接绑定点击事件，需要通过属性开启 
        -->
        <uni-list-item v-for="(item, index) in paymentChannel" :key="index" :title="item.title" :thumb="item.thumb" clickable @click="changeIndex(index)">
          <template #footer>
             <!-- 选中 -->
             <uni-icons v-if="index == channelIndex" size="26" color="#16C2A3" type="checkbox-filled" />
            <!-- 未选中 -->
            <uni-icons v-else size="26" color="#d1d1d1" type="circle" />
          </template>
        </uni-list-item>
      </uni-list>
      <button @click="submitPayment" class="uni-button">立即支付</button>
    </view>
  </uni-popup>
</template>

<style lang="scss">
.payment-container {
  min-height: 400rpx;
  border-radius: 30rpx 30rpx 0 0;
  background-color: #fff;
  padding: 10rpx 30rpx 40rpx;

  .payment-header {
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    margin-bottom: 20rpx;
    font-size: 32rpx;
    color: #333;
    position: relative;
  }

  .uni-icons-close {
    position: absolute;
    top: 2rpx;
    right: 0;
  }

  .order-amount {
    padding: 10rpx 0 10rpx;
    text-align: center;
    font-size: 40rpx;
    color: #333;
  }

  :deep(.uni-list-item__container) {
    padding: 40rpx 0 !important;
  }

  :deep(.uni-list-item--hover) {
    background-color: #fff !important;
  }

  :deep(.uni-list-item__icon) {
    margin-right: 0;
  }

  .uni-button {
    margin-top: 40rpx;
  }
}
</style>
